<script setup>
import microApp from '@micro-zoe/micro-app'
import { ref } from "vue"
import { useRouter } from 'vue-router';
import { logout } from "@/api/login"
const globalData = microApp.getGlobalData()
const router = useRouter()
const activeIndex = ref('home')
const handleSelect = (e) => {
    switch (e) {
        case "home":
            router.push({ name: "childHome" });
            break;
        case "job":
            router.push({ name: "childJob" });
            break;
        case "enterprice":
            router.push({ name: "childEnterprice" });
            break;
        case "about":
            router.push({ name: "childAbout" });
            break;

    }
}

const logout1 = async () => {
    const res = await logout({})
    const {code} = res
    if(code == "000000"){
        router.push("/main/login")
        microApp.clearGlobalData()
        router.go(0)
    }
    console.log(res);
}
</script>

<template>
    <div class="common-header">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64"
            text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
            <span class="company">DOSS直聘</span>
            <el-menu-item index="home">首页</el-menu-item>
            <el-menu-item index="job">找工作</el-menu-item>
            <el-menu-item index="enterprice">找企业</el-menu-item>
            <el-menu-item index="about">关于我们</el-menu-item>
            <el-button class="login-btn" plain round size="small" v-if="globalData && globalData.token"
                @click="logout1">退出</el-button>
            <el-button class="login-btn" plain round size="small" v-else
                @click="() => router.push({ name: 'login' })">登陆</el-button>
        </el-menu>
    </div>
</template>

<style scoped lang="scss">
.common-header {
    min-width: 1000px;
    position: relative;

    .company {
        height: 60px;
        line-height: 60px;
        font-size: 28px;
        font-weight: 600;
        width: 200px;
        text-align: center;
    }

    .login-btn {
        position: absolute;
        right: 20px;
        top: 18px;
        width: 60px;
    }
}

.el-menu-demo {
    min-width: 1000px;

}
</style>
